<template>
  <view>
    <view class="form-view">
      <view class="form-row">
        <view class="label">头像</view>
        <uni-icons
          v-if="!form.pictureName"
          @click="onPictureNameClick"
          class="avatar"
          type="person"
          size="30"></uni-icons>
        <image
          v-else
          class="avatar"
          @click="onPictureNameClick"
          :src="form.pictureName"></image>
      </view>
      <view class="div-line-type-1" />

      <view class="form-row">
        <view class="label">姓名</view>
        <input
          placeholder="请输入姓名"
          v-model="form.nurseName"
          placeholder-class="placeholder-class" />
      </view>
      <view class="div-line-type-1" />

      <view class="form-row">
        <view class="label">手机号</view>
        <input
          type="number"
          maxlength="11"
          v-model="form.tel"
          placeholder="请输入手机号"
          placeholder-class="placeholder-class" />
      </view>
      <view class="div-line-type-1" />

      <view class="form-row">
        <view class="label">选择所属医院</view>
        <view class="value">
          <picker
            :range="patientInfoList"
            range-key="hospitalAme"
            :value="index"
            @change="pickerChange">
            <view class="hospital-input-view">
              <!-- <view class="hospital-input">{{ form.hospitalName }}</view> -->
              <input
                placeholder="请选择"
                v-model="form.hospitalName"
                placeholder-class="placeholder-class" />
              <uni-icons type="right" color="#BABDC4" />
            </view>
          </picker>
        </view>
      </view>
      <view class="div-line-type-1" />

      <view class="form-row">
        <view class="label">所属区域</view>
        <view class="value region-selected">
          <uni-data-picker
            v-slot:default="{ data, error, options }"
            style="min-width: 100rpx"
            :clearIcon="false"
            :localdata="regionTree"
            @change="onRegionTreeChange">
            <view v-if="error">
              <text>{{ error }}</text>
              <uni-icons type="right" color="#BABDC4" />
            </view>
            <view v-else-if="data.length">
              <text>{{ form.region }}</text>
              <uni-icons type="right" color="#BABDC4" />
            </view>
            <view v-else>
              <text class="placeholder-class">请选择</text>
              <uni-icons type="right" color="#BABDC4" />
            </view>
          </uni-data-picker>
        </view>
      </view>
      <view class="div-line-type-1" />

      <view class="form-row">
        <view class="label">职称</view>
        <view class="value">
          <picker
            :range="positionalTitlesList"
            :value="index"
            @change="onPositionalTitlesPickerChange">
            <view class="hospital-input-view">
              <view v-if="form.positionalTitles" class="hospital-input">
                {{ form.positionalTitles }}
              </view>
              <view v-else class="placeholder-class">请选择</view>
              <uni-icons type="right" color="#BABDC4" />
            </view>
          </picker>
        </view>
      </view>
      <view class="div-line-type-1" />

      <view class="form-row">
        <view class="label">性别</view>
        <view class="value">
          <picker :range="sexList" :value="index" @change="onSexPickerChange">
            <view class="hospital-input-view">
              <view v-if="form.sex" class="hospital-input">{{ form.sex }}</view>
              <view v-else class="placeholder-class">请选择</view>
              <uni-icons type="right" color="#BABDC4" />
            </view>
          </picker>
        </view>
      </view>
      <view class="div-line-type-1" />

      <view class="form-row">
        <view class="label">行医时间</view>
        <view class="value">
          <picker
            mode="date"
            fields="month"
            @change="onPractiseMedicineTimePickerChange">
            <view class="hospital-input-view">
              <view v-if="form.practiseMedicineTime" class="hospital-input">
                {{ form.practiseMedicineTime }}
              </view>
              <view v-else class="placeholder-class">请选择</view>
              <uni-icons type="right" color="#BABDC4" />
            </view>
          </picker>
        </view>
      </view>
      <view class="div-line-type-1" />

      <view
        class="form-row"
        style="
          height: auto;
          box-sizing: border-box;
          align-items: flex-start;
          padding-top: 10rpx;
          padding-bottom: 10rpx;
        ">
        <view class="label">简介</view>
        <textarea
          style="height: 180rpx"
          placeholder="请输入简介"
          placeholder-class="placeholder-class"
          v-model="form.profiles" />
      </view>
      <view class="div-line-type-1" />

      <view class="form-row">
        <view class="label">身份证号</view>
        <input
          placeholder="请输入身份证号"
          placeholder-class="placeholder-class"
          v-model="form.idNum" />
      </view>
      <view class="div-line-type-1" />

      <view class="upload-id-card-view">
        <view class="title">上传身份证</view>
        <view class="card-view">
          <view class="card-item">
            <image
              v-if="!form.idCardFront"
              src="../../static/item_idcard_front.png"
              class="card-img"
              @click="onIdCardFrontClick"></image>
            <image
              v-else
              :src="form.idCardFront"
              class="card-img"
              @click="onIdCardFrontClick"></image>
            <view class="tip-text">身份证正面</view>
          </view>
          <view class="card-item">
            <image
              v-if="!form.idCardBack"
              src="../../static/item_idcard_back.png"
              class="card-img"
              @click="onIdCardReverseClick"></image>
            <image
              v-else
              :src="form.idCardBack"
              class="card-img"
              @click="onIdCardReverseClick"></image>
            <view class="tip-text">身份证反面</view>
          </view>
        </view>
      </view>
      <view class="div-line-type-1" />

      <view class="upload-id-card-view">
        <view class="title">护士资格证</view>
        <view class="card-view">
          <view class="card-item">
            <image
              v-if="!form.nurseQualificationCertificate"
              src="../../static/license_card.png"
              class="card-img"
              @click="onIdNurseQualificationCertificateClick"></image>
            <image
              v-else
              :src="form.nurseQualificationCertificate"
              class="card-img"
              @click="onIdNurseQualificationCertificateClick"></image>
            <view class="tip-text">护士资格证</view>
          </view>
        </view>
      </view>
      <view class="div-line-type-1" />
      <view class="upload-id-card-view">
        <view class="title">护士执业证</view>
        <view class="card-view">
          <view class="card-item">
            <image
              v-if="!form.professionalQualificationCertificate"
              src="../../static/license_card.png"
              class="card-img"
              @click="onNursePracticeCertificateClick"></image>
            <image
              v-else
              :src="form.professionalQualificationCertificate"
              class="card-img"
              @click="onNursePracticeCertificateClick"></image>
            <view class="tip-text">护士执业证</view>
          </view>
        </view>
      </view>
      <view class="div-line-type-1" />

      <view class="switch-tab-view">
        <view class="title-view">
          <view class="label">选择技能</view>
          <view class="label-tip">（可多选）</view>
        </view>
        <view class="tab-view">
          <view
            @click="tabClick(item, index)"
            :class="currentList.includes(item) ? 'tab-item-selected' : ''"
            v-for="(item, index) in tabs"
            class="tab-item">
            {{ item.skillName }}
          </view>
        </view>
      </view>
    </view>

    <view class="bottom-fixed-view">
      <view class="submit-btn" @click="insertNurseInfo">提交</view>
    </view>
  </view>
</template>

<script>
import * as upload from "../../common/upload.js";
import * as patientInfo from "../../common/api/hospitalInfo.js";
import * as nurseInfo from "../../common/api/nurseInfo.js";
import * as map from "../../common/map.js";
import * as skillInfo from "../../common/api/skillInfo.js";
export default {
  data() {
    return {
      form: {
        pictureName: "", //头像
        nurseName: "",
        hospitalUid: "",
        hospitalName: "",
        sex: "",
        tel: "",
        idNum: "",
        nurseQualificationCertificate: "",
        idCardFront: "",
        idCardBack: "",
        skillName: "", //技能
        skillUid: "",
        positionalTitles: "护士",
        professionalQualificationCertificate: "", //护士执业证
        positionalTitles: "", //职称
        region: "", //所属区域
        sex: "",
        practiseMedicineTime: "", //行医时间
        profiles: "", //简介
        status: "待认证",
      },
      index: 0,
      tabs: [],
      currentList: [],
      canvasWidth: "",
      canvasHeight: "",
      showCanvas: true,
      list: [],
      patientInfoList: [], //医院列表
      positionalTitlesList: [
        "护士",
        "护师",
        "主管护师",
        "副主任护师",
        "主任护师",
        "住院医生",
        "主治医生",
        "副主任医生",
        "主任医生",
      ],
      regionTree: [],
      sexList: ["男", "女"],
    };
  },
  onLoad(opt) {
    this.onLoadPatientInfo();
    this.initRegionTree();
    this.getSkillInfoList();
  },
  methods: {
    tabClick(item, index) {
      if (this.currentList.includes(item)) {
        const idx = this.currentList.indexOf(item);
        this.$delete(this.currentList, idx);
        return;
      }
      this.currentList.push(item);
    },
    pickerChange(e) {
      this.form.hospitalName = this.patientInfoList[e.target.value].hospitalAme;
      this.form.hospitalUid = this.patientInfoList[e.target.value].uid;
      this.index = e.target.value;
      //console.log(this.title_list[e.target.value].id) //获取id
    },
    onIdCardFrontClick() {
      const self = this;
      uni.chooseImage({
        success(res) {
          upload
            .uploadIdCardFile(res.tempFilePaths[0])
            .then((result) => {
              uni.showToast({
                icon: "success",
                title: "上传成功",
              });
              self.form.idCardFront = result.data.url;
              self.form.idNum = result.data.idInfo.num;
              self.form.sex = result.data.idInfo.sex;
              self.form.nurseName = result.data.idInfo.name;
              console.log("res");
            })
            .catch((error) => {
              uni.showToast({
                icon: "none",
                title: `上传失败${JSON.stringify(error)}`,
              });
            });
        },
      });
    },
    onIdCardReverseClick() {
      const self = this;
      upload.uploadImage().then((result) => {
        uni.showToast({
          icon: "success",
          title: "上传成功",
        });
        console.log("===>", result);
        self.form.idCardBack = result.data.url;
      });
    },
    onIdNurseQualificationCertificateClick() {
      const self = this;
      upload.uploadImage().then((result) => {
        uni.showToast({
          icon: "success",
          title: "上传成功",
        });
        console.log("===>", result);
        self.form.nurseQualificationCertificate = result.data.url;
      });
    },
    onPictureNameClick() {
      const self = this;
      upload.uploadImage().then((result) => {
        uni.showToast({
          icon: "success",
          title: "上传成功",
        });
        console.log("===>", result);
        self.form.pictureName = result.data.url;
      });
    },
    onNursePracticeCertificateClick() {
      const self = this;
      upload.uploadImage().then((result) => {
        uni.showToast({
          icon: "success",
          title: "上传成功",
        });
        console.log("===>", result);
        self.form.professionalQualificationCertificate = result.data.url;
      });
    },
    onLoadPatientInfo() {
      const param = Object.assign({});
      patientInfo
        .queryByPage(param)
        .then((result) => {
          this.patientInfoList = result.data.data.rows || [];
          this.handlePatientInfo();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handlePatientInfo() {
      if (this.patientInfoList.length < 0) {
        return;
      }
      this.form.hospitalName = "";
      this.form.hospitalUid = "";
      // this.form.hospitalName = this.patientInfoList[0].hospitalAme;
      // this.form.hospitalUid = this.patientInfoList[0].uid;
    },
    checkForm() {
      const showMsg = (msg = "") => {
        if (msg) {
          uni.showToast({
            title: msg,
            icon: "none",
          });
        }
      };
      if (!this.form.pictureName) {
        showMsg("头像不能为空");
        return false;
      }
      if (!this.form.nurseName) {
        showMsg("姓名不能为空");
        return false;
      }
      if (!this.form.tel) {
        showMsg("手机号不能为空");
        return false;
      }
      if (!this.form.hospitalUid) {
        showMsg("所属医院不能为空");
        return false;
      }
      if (!this.form.region) {
        showMsg("所属区域不能为空");
        return false;
      }
      if (!this.form.positionalTitles) {
        showMsg("职称不能为空");
        return false;
      }
      if (!this.form.sex) {
        showMsg("性别不能为空");
        return false;
      }
      if (!this.form.practiseMedicineTime) {
        showMsg("行医时间不能为空");
        return false;
      }
      if (!this.form.profiles) {
        showMsg("简介不能为空");
        return false;
      }
      if (!this.form.idNum) {
        showMsg("身份证号不能为空");
        return false;
      }
      if (!this.form.idCardFront) {
        showMsg("请上传身份证正面");
        return false;
      }
      if (!this.form.idCardBack) {
        showMsg("请上传身份证背面");
        return false;
      }
      if (!this.form.nurseQualificationCertificate) {
        showMsg("请上传护士资格证书");
        return false;
      }
      if (!this.form.professionalQualificationCertificate) {
        showMsg("请上传护士执业证");
        return false;
      }
      if (!this.form.skillName) {
        showMsg("请选择技能");
        return false;
      }
      return true;
    },
    insertNurseInfo() {
      if (this.currentList.length > 0) {
        this.form.skillName = JSON.stringify(
          this.currentList.map((e) => e.skillName)
        );
        this.form.skillUid = JSON.stringify(this.currentList.map((e) => e.uid));
      }
      console.log("-->", JSON.stringify(this.form));
      if (!this.checkForm()) {
        return;
      }
      const param = Object.assign({}, this.form);
      nurseInfo
        .insert(param)
        .then((result) => {
          uni.showToast({
            title: "注册成功",
            icon: "success",
            duration: 2000,
          });
          setTimeout(() => {
            uni.reLaunch({
              url: "/pages/login/login",
            });
          }, 2000);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    onPositionalTitlesPickerChange(e) {
      console.log(e);
      this.form.positionalTitles = this.positionalTitlesList[e.detail.value];
    },
    initRegionTree() {
      this.regionTree = map.regionTree;
    },
    onRegionTreeChange(e) {
      console.log(JSON.stringify(e));
      const value = e.detail.value || [];
      const last = value[value.length - 1];
      this.form.region = last.value;
    },
    onSexPickerChange(e) {
      this.form.sex = this.sexList[e.detail.value];
    },
    onPractiseMedicineTimePickerChange(e) {
      console.log(JSON.stringify(e));
      this.form.practiseMedicineTime = e.detail.value;
    },
    getSkillInfoList() {
      skillInfo
        .queryByPage({})
        .then((result) => {
          this.tabs = result.data.data.rows || [];
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.form-view {
  width: 100%;
  display: flex;
  flex-direction: column;

  .form-row {
    display: flex;
    background: white;
    padding: 0 30rpx;
    height: 120rpx;
    align-items: center;
    justify-content: space-between;

    .label {
      color: #232323;
      font-size: 32rpx;
      font-weight: bold;
    }

    .value {
      display: flex;
      align-items: center;
    }

    input {
      text-align: end;
    }

    .placeholder-class {
      color: rgba(35, 35, 35, 0.4);
      font-size: 32rpx;
    }

    .uni-icons {
      margin-left: 16rpx;
    }

    .hospital-input-view {
      display: flex;
      align-items: center;

      .hospital-input {
      }
    }

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      border: solid 1rpx #f8f8f8;
    }
  }

  .div-line-type-1 {
    width: calc(100% - 30rpx);
    background: #f8f8f8;
    height: 2rpx;
    margin-left: 30rpx;
  }
}

.upload-id-card-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 30rpx;
  box-sizing: border-box;

  .title {
    color: #232323;
    font-size: 32rpx;
    font-weight: bold;
  }

  .card-view {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32rpx;
  }

  .card-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .card-img {
      width: 330rpx;
      height: 200rpx;
    }

    .tip-text {
      color: rgba(35, 35, 35, 0.8);
      font-size: 24rpx;
      margin-top: 28rpx;
    }
  }
}

.switch-tab-view {
  width: 100%;
  background: white;
  box-sizing: border-box;
  padding: 30rpx;
  margin-bottom: 120rpx;

  .title-view {
    display: flex;
    align-items: center;
  }

  .label {
    color: #232323;
    font-size: 32rpx;
    font-weight: bold;
  }

  .label-tip {
    color: rgba(35, 35, 35, 0.5);
    font-size: 26rpx;
  }

  .tab-view {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .tab-item {
      background: #f6f6f6;
      padding: 0 20rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 40rpx;
      color: rgba(35, 35, 35, 0.8);
      font-size: 26rpx;
      margin-top: 20rpx;
      margin-left: 20rpx;
    }

    .tab-item-selected {
      background: #2eb0d9;
      color: white;
    }
  }
}

.bottom-fixed-view {
  width: 100%;
  height: 108rpx;
  position: fixed;
  background: white;
  padding: 14rpx 30rpx;
  box-sizing: border-box;
  bottom: 0;

  .submit-btn {
    width: 100%;
    height: 80rpx;
    background: #2eb0d9;
    border-radius: 40rpx;
    color: white;
    font-size: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.region-selected {
  ::v-deep .input-value-border {
    border: none;
  }

  ::v-deep .input-arrow {
    display: none;
    width: 0;
    height: 0;
  }

  ::v-deep .input-value {
    display: inline;
    height: auto;
  }
}
</style>
